import React, { useState, useEffect, useRef } from 'react';
import { useRequest, useModel } from 'umi';
import { Row, List, Card, Tabs, Descriptions, Image, message, Collapse, Radio,Space,Tooltip  } from 'antd';
import {
  getMonitoringDevicInfo,
  getEChartsOption,
  getMonitoringPhase,
} from '@/services/deviceLive';


import moment from 'moment';
import ECharts from 'echarts-for-react';
import AlarmTable from '@/pages/monitoring/deviceAlarm';
import DeviceRunState from '@/pages/monitoring/deviceRunState';

import styles from './index.less';

import { updateDeviceAlarm } from '@/services/deviceAlarm';
import slg from '@/assets/img/img/slg.png';

import item4 from '@/assets/img/img/item4.png';
import item5 from '@/assets/img/img/item5.png';
import item6 from '@/assets/img/img/item6.png';
import item7 from '@/assets/img/img/item7.png';
import item8 from '@/assets/img/img/item8.png';
import item91 from '@/assets/img/img/item9-1.png';
import item92 from '@/assets/img/img/item9-2.png';
import item44 from '@/assets/img/img/2item1-1.png';


const details: React.FC = (props: any) => {
  const { params } = props.match;

  const second = useRequest(
    () => {
      return getMonitoringPhase({ ...params, type: 5 });
    },
    {
      pollingInterval: 3000,
      pollingWhenHidden: false,
    },
  );

  const [deviceInfo, setDeviceInfo] = useState<API.DeviceItem>({});
  const [runningData, setRunningData] = useState({});

  const [chartIndex, setChartIndex] = useState(4);

  const [onLineBackgroundColor, setOnLineBackgroundColor] = useState('#8ca1aa');


  const { initialState, setInitialState } = useModel('@@initialState');
  const { mySocket, dicts, currentUser } = initialState || {};

  if (mySocket&&mySocket.ws.readyState==1){
    mySocket.send(params.id);
    mySocket.onmessage = async function (e) {
      // console.log(`onmessage: ${e.data}`);
      //排除心跳数据
      if ('heartbeat' != e.data && e.data.indexOf('AlarmData') != -1) {
        const data = JSON.parse(e.data);
        await setInitialState((s) => ({ ...s, alarmNotices: data.AlarmData }));
      } else if ('heartbeat' != e.data) {
        onMessage(e);
      }
    };
  }

  const onMessage = (e: any) => {
    const message = JSON.parse(e.data);
    // const runningData = {...message.RunningData, ...message.ReliabilityData}
    const rData = message.RunningData || {};
    if (rData.deviceId != params.id) {
      return;
    }
    // console.log(rData)
    rData.acquisitionTime = moment().format('YYYY-MM-DD HH:mm:ss');
    if (runningData?.online == 0 && rData?.online == 1) {
      go();
    }

    setRunningData(rData);
  };

  useEffect(() => {
    const setSelectData = async () => {
      var details = await getMonitoringDevicInfo(params);
      if (details.deviceInfo) {
        details.deviceInfo.protocol = JSON.parse(details.deviceInfo.protocolConfig) || [];
      }
      setRunningData(details.runningData);
      setDeviceInfo(details.deviceInfo);
      if (details.runningData?.online == 1) {
        await go();
      }
    };
    setSelectData();
   
  }, []);

  const sleep = (t) => {
    return new Promise((res, rej) => {
      setTimeout(res, t);
    });
  };

  async function go() {
    setOnLineBackgroundColor('yellow');
    await sleep(200);
    setOnLineBackgroundColor('#19377f');
    await sleep(200);
    go();
  }

  const option2 = {
    // color: ["red", "green", "yellow"],
    grid: {
      top: 50,
      left: 60,
      right: 50,
      bottom: 30,
    },
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      // data: [second.data?.series[0].name, second.data?.series[1].name, second.data?.series[2].name],
      textStyle: {
        color: '#ddd',
      },
    },
    toolbox: {
      show: false,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: second.data?.phaseTime,
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#ddd', //左边线的颜色
        },
      },
    },
    yAxis: {
      type: 'value',
      // min:0,  //取0为最小刻度
      // max: 60, //取100为最大刻度
      axisLabel: {
        formatter: '{value}',
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#ddd', //左边线的颜色
        },
      },
    },
    series: second.data?.data,
  };

  const option3 = {
    // color: ["red", "green", "yellow"],
    grid: {
      top: 50,
      left: 60,
      right: 50,
      bottom: 30,
    },
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      // data: [second.data?.series[0].name, second.data?.series[1].name, second.data?.series[2].name],
      textStyle: {
        color: '#ddd',
      },
    },
    toolbox: {
      show: false,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: second.data?.phaseTime,
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#ddd', //左边线的颜色
        },
      },
    },
    yAxis: {
      type: 'value',
      scale: true,
      min: 0, //取0为最小刻度

      axisLabel: {
        formatter: '{value}',
      },
      minInterval: 1,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#ddd', //左边线的颜色
        },
      },
    },
    series: second.data?.data1,
  };

  
  return (
    <div className={styles.main} key={1}>
      <div className={styles.flexBetween} style={{ marginRight: '10px', alignItems: 'end' }}>
        <div className={styles.flexBetween} style={{ flex: 5, alignItems: 'end' }}>
          <div style={{ flex: 1 }}>
            <div className={styles.flex}>
              <Image src={slg} preview={false} />
              <div className={styles.deviceInfo}>
                <div>
                  <span className={styles.title}> {deviceInfo?.deviceName || '--'} </span>
                  <span className={styles.updateTimeText}>
                    {' '}
                    (最新同步时间：{runningData?.acquisitionTime || '--'})
                  </span>
                </div>
                <div className={styles.flexBetween}>
                  <div>
                    <span>设备位号：{deviceInfo?.deviceNo || '--'} </span>
                    <span>
                      &nbsp; 安装位置：{deviceInfo?.areaName || '--'}
                      {deviceInfo?.devicePosition}
                    </span>
                  </div>
                  <div>最新维保日期:{deviceInfo?.latestMaintenanceTime}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.flexBetween} style={{ marginLeft: '50px' }}>
          <div>
            <div
              className={
                runningData?.online == 1 ? [styles.yuan, styles.bgYellow].join(' ') : styles.yuan
              }
              style={{ backgroundColor: onLineBackgroundColor }}
            ></div>
            <span>通讯</span>
          </div>
        </div>
      </div>

      <div className={styles.flex}>
        <div style={{ flex: 4 }}>
          <div className={styles.flex}>
            <div className={styles.dataItem} style={{ marginLeft: 0 }}>
              <div className={styles.flexBetween}>
                <Image width={20} height={20} src={item8} preview={false} />{' '}
                <span className={styles.topRight}></span>
              </div>
              <div>
                <div
                  style={{ margin: '2px 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>U</span>a
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phaseaVoltage}</span>V
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -7px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>U</span>b
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phasebVoltage}</span>V
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -6px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>U</span>c
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phasecVoltage}</span>V
                  </div>
                </div>
              </div>
              <div className={styles.attribute} style={{ marginTop: '6px' }}>
                三相电压
              </div>
            </div>
            <div className={styles.dataItem}>
              <div className={styles.flexBetween}>
                <Image width={20} height={20} src={item8} preview={false} />{' '}
                <span className={styles.topRight}></span>
              </div>
              <div>
                <div
                  style={{ margin: '2px 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>U</span>ab
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.uabLineVoltage}</span>V
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -7px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>U</span>bc
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.ubcLineVoltage}</span>V
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -6px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>U</span>ac
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.ucaLineVoltage}</span>V
                  </div>
                </div>
              </div>
              <div className={styles.attribute} style={{ marginTop: '6px' }}>
                线电压
              </div>
            </div>
            <div className={styles.dataItem}>
              <div className={styles.flexBetween}>
                <Image width={20} height={20} src={item7} preview={false} />{' '}
                <span className={styles.topRight}></span>
              </div>
              <div>
                <div
                  style={{ margin: '2px 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>I</span>a
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phaseaCurrent}</span>A
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -7px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>I</span>b
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phasebCurrent}</span>A
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -6px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>I</span>c
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phasecCurrent}</span>A
                  </div>
                </div>
              </div>
              <div className={styles.attribute} style={{ marginTop: '6px' }}>
                三相电流
              </div>
            </div>
            <div className={styles.dataItem}>
              <div className={styles.flexBetween}>
                <Image width={20} height={20} src={item4} preview={false} />{' '}
                <span className={styles.topRight}></span>
              </div>
              <div className={styles.middleValue}>
                <span className={styles.data}>{runningData?.gridFrequency || '--'}</span>
                <span className={styles.unit}>Hz</span>
              </div>
              <div className={styles.attribute}>电网频率</div>
            </div>
          </div>
          <div className={styles.flex}>
            <div className={styles.dataItem} style={{ height: '252px', marginLeft: 0 }}>
              <div className={styles.flexBetween}>
                <Image width={20} height={20} src={item4} preview={false} />{' '}
                <span className={styles.topRight}></span>
              </div>
              <div>
                <div
                  style={{ margin: '2px 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>P</span>a
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phaseaActivePower}</span>kW
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>P</span>b
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phasebActivePower}</span>kW
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>P</span>c
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phasecActivePower}</span>kW
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>Ps</span>
                  </span>
                  <div className={styles.dataBox1}>
                    <span className={styles.data1}>{runningData?.conjunctionActivePower}</span>kW
                  </div>
                </div>
              </div>
              <div className={styles.attribute} style={{ marginTop: '6px' }}>
                有功功率
              </div>
            </div>
            <div className={styles.dataItem} style={{ height: '252px' }}>
              <div className={styles.flexBetween}>
                <Image width={20} height={20} src={item5} preview={false} />{' '}
                <span className={styles.topRight}></span>
              </div>
              <div>
                <div
                  style={{ margin: '2px 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>Q</span>a
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phaseaReactivePower}</span>Kvar
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>Q</span>b
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phasebReactivePower}</span>Kvar
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>Q</span>c
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phasecReactivePower}</span>Kvar
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>Qs</span>
                  </span>
                  <div className={styles.dataBox1}>
                    <span className={styles.data1}>{runningData?.conjunctionReactivePower}</span>
                    Kvar
                  </div>
                </div>
              </div>
              <div className={styles.attribute} style={{ marginTop: '6px' }}>
                无功功率
              </div>
            </div>
            <div className={styles.dataItem} style={{ height: '252px' }}>
              <div className={styles.flexBetween}>
                <Image width={20} height={20} src={item6} preview={false} />{' '}
                <span className={styles.topRight}></span>
              </div>
              <div>
                <div
                  style={{ margin: '2px 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>S</span>a
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phaseaApparentPower}</span>KVA
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>S</span>b
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phasebApparentPower}</span>KVA
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>S</span>c
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phaseacpparentPower}</span>KVA
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>Ss</span>
                  </span>
                  <div className={styles.dataBox1}>
                    <span className={styles.data1}>{runningData?.conjunctionApparentPower}</span>KVA
                  </div>
                </div>
              </div>
              <div className={styles.attribute} style={{ marginTop: '6px' }}>
                视在功率
              </div>
            </div>
            <div className={styles.dataItem} style={{ height: '252px' }}>
              <div className={styles.flexBetween}>
                <Image width={20} height={20} src={item91} preview={false} />{' '}
                <span className={styles.topRight}></span>
              </div>
              <div>
                <div
                  style={{ margin: '2px 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>PF</span>a
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phaseaPowerFactor}</span>%
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>PF</span>b
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phasebPowerFactor}</span>%
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>PF</span>c
                  </span>
                  <div className={styles.dataBox}>
                    <span className={styles.data1}>{runningData?.phasecPowerFactor}</span>%
                  </div>
                </div>
                <div
                  style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
                  className={styles.flex}
                >
                  <span>
                    <span className={styles.nameItalic}>PFs</span>
                  </span>
                  <div className={styles.dataBox1}>
                    <span className={styles.data1}>{runningData?.conjunctionPowerFactor}</span>%
                  </div>
                </div>
              </div>
              <div className={styles.attribute} style={{ marginTop: '6px' }}>
                功率因数
              </div>
            </div>
          </div>
        </div>
        <div style={{ flex: 1 }}>
          <div className={styles.dataItem} style={{ height: '470px' }}>
            <div className={styles.flexBetween}>
              <Image width={20} height={20} src={item44} preview={false} />{' '}
              <span className={styles.topRight}></span>
            </div>
            <div>
              <div
                style={{ margin: '5px 0 -8px 10px', color: 'rgb(64 255 255)' }}
                className={styles.flex}
              >
                <span>
                  <span className={styles.nameItalic}>W</span>pp
                </span>
                <div className={styles.dataBox} style={{ marginLeft: '15px' }}>
                  <span className={styles.data1}>{runningData?.firstSidePositiveActiveEnergy}</span>
                  Kwh
                </div>
              </div>
              <div
                style={{ margin: '0 0 -7px 10px', color: 'rgb(64 255 255)' }}
                className={styles.flex}
              >
                <span>
                  <span className={styles.nameItalic}>W</span>pn
                </span>
                <div className={styles.dataBox} style={{ marginLeft: '15px' }}>
                  <span className={styles.data1}>{runningData?.firstSideNegativeActiveEnergy}</span>
                  Kwh
                </div>
              </div>
              <div
                style={{ margin: '0 0 -7px 10px', color: 'rgb(64 255 255)' }}
                className={styles.flex}
              >
                <span>
                  <span className={styles.nameItalic}>W</span>qp
                </span>
                <div className={styles.dataBox} style={{ marginLeft: '15px' }}>
                  <span className={styles.data1}>
                    {runningData?.firstSidePositiveReactiveEnergy}
                  </span>
                  Kvarh
                </div>
              </div>
              <div
                style={{ margin: '0 0 -7px 10px', color: 'rgb(64 255 255)' }}
                className={styles.flex}
              >
                <span>
                  <span className={styles.nameItalic}>W</span>qn
                </span>
                <div className={styles.dataBox} style={{ marginLeft: '15px' }}>
                  <span className={styles.data1}>
                    {runningData?.firstSideNegativeReactiveEnergy}
                  </span>
                  Kvarh
                </div>
              </div>
              <div
                style={{ margin: '0 0 -7px 10px', color: 'rgb(64 255 255)' }}
                className={styles.flex}
              >
                <span>
                  <span className={styles.nameItalic}>E</span>pp
                </span>
                <div className={styles.dataBox}>
                  <span className={styles.data1}>
                    {runningData?.secondSidePositiveActiveEnergy}
                  </span>
                  Kwh
                </div>
              </div>
              <div
                style={{ margin: '0 0 -7px 10px', color: 'rgb(64 255 255)' }}
                className={styles.flex}
              >
                <span>
                  <span className={styles.nameItalic}>E</span>pn
                </span>
                <div className={styles.dataBox}>
                  <span className={styles.data1}>
                    {runningData?.secondSideNegativeActiveEnergy}
                  </span>
                  Kwh
                </div>
              </div>
              <div
                style={{ margin: '0 0 -7px 10px', color: 'rgb(64 255 255)' }}
                className={styles.flex}
              >
                <span>
                  <span className={styles.nameItalic}>E</span>qp
                </span>
                <div className={styles.dataBox}>
                  <span className={styles.data1}>
                    {runningData?.secondSidePositiveReactiveEnergy}
                  </span>
                  Kvarh
                </div>
              </div>
              <div
                style={{ margin: '0 0 -7px 10px', color: 'rgb(64 255 255)' }}
                className={styles.flex}
              >
                <span>
                  <span className={styles.nameItalic}>E</span>qn
                </span>
                <div className={styles.dataBox}>
                  <span className={styles.data1}>
                    {runningData?.secondSideNegativeReactiveEnergy}
                  </span>
                  Kvarh
                </div>
              </div>
            </div>
            <div className={styles.attribute} style={{ marginTop: '32px' }}>
              两次电能
            </div>
          </div>
        </div>
      </div>
      <div className={styles.flex}>
        <div className={styles.dataItem} style={{ height: '300px', marginLeft: 0 }}>
          <div className={styles.flexBetween}>
            <Image width={20} height={20} src={item44} preview={false} />{' '}
            <span className={styles.topRight}></span>
          </div>
          <div>
            <div
              style={{ margin: '2px 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>Ps</span>
              </span>
              <div className={styles.dataBox1}>
                <span className={styles.data1}>{runningData?.totalActiveEnergy1}</span>Kwh
              </div>
            </div>
            <div
              style={{ margin: '2px 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>1
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.totalActiveEnergy2}</span>Kwh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>2
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.totalActiveEnergy3}</span>Kwh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>3
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.totalActiveEnergy4}</span>Kwh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>4
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.totalActiveEnergy}</span>Kwh
              </div>
            </div>
          </div>
          <div className={styles.attribute} style={{ marginTop: '6px' }}>
            有功电能
          </div>
        </div>
        <div className={styles.dataItem} style={{ height: '300px' }}>
          <div className={styles.flexBetween}>
            <Image width={20} height={20} src={item44} preview={false} />{' '}
            <span className={styles.topRight}></span>
          </div>
          <div>
            <div
              style={{ margin: '2px 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>Ps</span>
              </span>
              <div className={styles.dataBox1}>
                <span className={styles.data1}>{runningData?.positiveActiveEnergy}</span>Kwh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>1
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.positiveActiveEnergy1}</span>Kwh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>2
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.positiveActiveEnergy2}</span>Kwh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>3
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.positiveActiveEnergy3}</span>Kwh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>4
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.positiveActiveEnergy4}</span>Kwh
              </div>
            </div>
          </div>
          <div className={styles.attribute} style={{ marginTop: '6px' }}>
            正向有功电能
          </div>
        </div>
        <div className={styles.dataItem} style={{ height: '300px' }}>
          <div className={styles.flexBetween}>
            <Image width={20} height={20} src={item44} preview={false} />{' '}
            <span className={styles.topRight}></span>
          </div>
          <div>
            <div
              style={{ margin: '2px 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>Ps</span>
              </span>
              <div className={styles.dataBox1}>
                <span className={styles.data1}>{runningData?.negativeActiveEnergy}</span>Kwh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>1
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.negativeActiveEnergy1}</span>Kwh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>2
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.negativeActiveEnergy2}</span>Kwh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>3
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.negativeActiveEnergy3}</span>Kwh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>4
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.negativeActiveEnergy4}</span>Kwh
              </div>
            </div>
          </div>
          <div className={styles.attribute} style={{ marginTop: '6px' }}>
            反向有功电能
          </div>
        </div>
        <div className={styles.dataItem} style={{ height: '300px' }}>
          <div className={styles.flexBetween}>
            <Image width={20} height={20} src={item44} preview={false} />{' '}
            <span className={styles.topRight}></span>
          </div>
          <div>
            <div
              style={{ margin: '2px 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>Ps</span>
              </span>
              <div className={styles.dataBox1}>
                <span className={styles.data1}>{runningData?.totalReactiveEnergy}</span>Kvarh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>1
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.reactiveEnergy1}</span>Kvarh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>2
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.reactiveEnergy2}</span>Kvarh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>3
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.reactiveEnergy3}</span>Kvarh
              </div>
            </div>
            <div
              style={{ margin: '0 0 -8px 10px', color: 'rgb(64 255 255)' }}
              className={styles.flex}
            >
              <span>
                <span className={styles.nameItalic}>P</span>4
              </span>
              <div className={styles.dataBox}>
                <span className={styles.data1}>{runningData?.reactiveEnergy4}</span>Kvarh
              </div>
            </div>
            <div className={styles.attribute} style={{ marginTop: '6px' }}>
              无功电能
            </div>
          </div>
        </div>
        <div style={{ flex: 1, margin: '5px 6px', padding: '12px 20px' }}></div>
      </div>

      <Row style={{ marginRight: '0' }} key={6}>
        <div className={styles.tabsTitle}>
          <a className={chartIndex != 4 ? styles.a1 : [styles.a1, styles.tabcheck1].join(' ')} onClick={() => setChartIndex(4)} > 运行状态</a>
          <div className={ chartIndex != 4 ? styles.a1after : [styles.a1after, styles.a1afterCheck].join(' ') }></div>
          <a
            className={chartIndex != 1 ? styles.a2 : [styles.a2, styles.tabcheck].join(' ')}
            onClick={() => setChartIndex(1)}
          >
            一次电能趋势分析
          </a>
          <a
            className={chartIndex != 2 ? styles.a2 : [styles.a2, styles.tabcheck].join(' ')}
            onClick={() => setChartIndex(2)}
          >
            {' '}
            二次电能趋势分析
          </a>
          <a
            className={chartIndex != 3 ? styles.a3 : [styles.a3, styles.tabcheck].join(' ')}
            onClick={() => setChartIndex(3)}
          >
            {' '}
            报警信息
          </a>
        </div>
        <Card className={styles.modalItem} title={null} style={{ width: '100%' }}>
          <ECharts style={{ display: chartIndex == 1 ? 'block' : 'none' }} option={option2} />
          <ECharts style={{ display: chartIndex == 2 ? 'block' : 'none' }} option={option3} />
          <AlarmTable deviceId={params.id} display={chartIndex==3?'block':'none'}></AlarmTable>
          <DeviceRunState  deviceId={params.id} display={chartIndex==4?'block':'none'} />
        </Card>
      </Row>
     
    </div>
  );
};

export default details;
